「做一個好用、漂亮、可以搜尋的下拉選單。」
只看這句話，我腦中已經會冒出不少問題：可以輸入新值嗎？是單選還是多選？選完會更新哪裡？沒有結果時要留下什麼？
我先忍住不補答案，把這句話和「用單選 Combobox 選擇既有部門」各做成一個可操作頁面，然後在兩邊都輸入「研究」。
圖 1：左邊的清單完全沒變；右邊知道要篩選既有部門，但兩邊都還缺少選取後的結果、Reset 與非理想狀態。
這次操作讓我確認一件事：說出 Combobox，確實能排除 Menu、一般 Text Field 等錯誤方向；但元件名稱不會自動替我們決定產品規則。
| 我實際做的事 | 模糊要求 | 只有元件名稱 |
|---|---|---|
| 輸入「研究」 | 三個選項全部保留 | 清單縮小為「研究組」 |
| 判斷能否建立新部門 | 無法判斷 | 已限制為既有部門 |
| 選取後是否更新成員清單 | 無法判斷 | 仍然無法判斷 |
| 檢查 Loading、Empty、Error | 沒有 | 沒有 |
| 清除條件與手機、鍵盤驗收 | 沒有 | 沒有 |
右邊比左邊好，但還不能交付。UI Spec 就是把這些仍然只能靠猜的地方寫出來。
「Spec」聽起來很正式，在這個系列裡，它只是一張動手前的提醒卡。你不必先學會設計文件格式，也不用把每個像素寫滿。
圖 2：八格不是八段漂亮文字。每一格都要能落到畫面、操作或驗收。
| 要寫的內容 | 用白話問自己 | LumenDesk 部門篩選 |
|---|---|---|
| 誰要用、要做什麼 | 使用者來這裡要完成哪件事？ | 管理員想找出某個部門的成員。 |
| 要用哪個元件 | 這個任務需要哪一種控制？ | 單選、可搜尋的 Combobox。 |
| 內容從哪裡來 | 使用者可以選什麼？有沒有不能選的？ | 只能從既有部門選，不能自己新增。 |
| 操作後會怎樣 | 輸入、選取、清除後，畫面怎麼變？ | 輸入會篩選；選到部門後更新清單；Reset 清除條件。 |
| 不順利時怎麼辦 | 載入中、找不到、失敗或停用時要看見什麼？ | 保留欄位標籤；無結果可清除；失敗時可以重試。 |
| 手機能不能用 | 小螢幕上，哪些東西不能被擠掉？ | Label、目前選擇、錯誤訊息和 Reset 都要看得到。 |
| 不用滑鼠能不能用 | 鍵盤按下去會發生什麼？焦點看得見嗎？ | ↓ 開啟、Enter 選取、Escape 關閉。 |
| 怎樣算完成 | 你要怎麼知道 AI 這次做對了？ | 不用滑鼠完成搜尋、選取、關閉與重設。 |
這八格沒有規定畫面一定要長什麼樣子。它們限制的是責任：資料從哪裡來、操作如何回應、失敗後怎麼繼續，以及最後怎麼判斷 AI 做對了。
我以前寫需求時，也會想把空格全部填滿，免得看起來不完整。實際和 AI 合作後，我反而更在意哪些事情還沒有決定。
例如「輸入幾個字後才查詢」可能牽涉資料量和 API 成本。如果目前不知道，直接寫：
查詢觸發字數：待確認。
請先提供「輸入即篩選」與「輸入 2 個字後查詢」的差異，
不要自行替我選一種。
這比寫一個看似完整、其實是臨時猜出的數字可靠。待確認不是漏洞，它讓問題留在看得到的地方。
我把八格規格用在元件百科網站的 Combobox｜組合式選擇框 Demo。它不是只放一張完成圖，右側可以切換預設、已選取、載入中、無結果、載入失敗與停用等狀態。
圖 3：輸入「研究」後只剩研究組；右側保留各種狀態入口，Reset 也沒有被藏在 Prompt 裡。
我做了四項檢查：
Prompt 的長度沒有讓這些結果自動變好。真正有差的是，規格裡的每句話都能對應到一個操作或畫面狀態。
圖 4：規格補的是可觀察的操作與狀態，不是更多形容詞。
下面這份不用逐字照抄。方括號換成你的情境，沒決定的地方就留下待確認。
我要做 [頁面或功能名稱]，給 [使用者角色] 使用。
他來這裡要完成的是：[一個主要任務]。
請使用 [UI 元件名稱]，讓他可以 [操作方式]。
資料來自 [資料來源或固定選項]；[允許／不允許的事情]。
使用者輸入、選取、清除或送出後，畫面要分別發生：[操作結果]。
載入中、沒有資料、失敗與停用時，請顯示：[狀態與下一步]。
360px 時必須保留：[不能省略的資訊或操作]。
鍵盤要能完成：[按鍵與預期結果]。
完成時，我會驗收：[可以實際操作或觀察的條件]。
還沒決定的地方請標示為「待確認」，不要自行假設。
Day 2 的元件名稱能縮小範圍，Day 3 的 UI Spec 再把資料、行為、狀態和驗收方式固定下來。
我不在意八格是不是每次都填得很漂亮。我在意的是 AI 交出畫面後，能不能真的輸入、選取、失敗、重設，最後清楚說出哪一項通過、哪一項要退回。
iThome鐵人賽
看影片追技術